<template>
  <div class="input-number-inner">
    <lm-input
      v-model="inputVal"
      center
      suffixEnd
      prefixHead
      :disabled="disabled"
      @change="handleChange"
    >
      <div
        class="cursor-pointer pre"
        slot="prepend"
        :class="{ 'is-disabled': decreaseDisabled }"
        @click="handleClick('decrease')"
      >
        <lm-icon name="minus" size="15"></lm-icon>
      </div>
      <div
        class="cursor-pointer end"
        slot="shuffend"
        :class="{ 'is-disabled': increaseDisabled }"
        @click="handleClick('increase')"
      >
        <lm-icon name="plus" size="15"></lm-icon>
      </div>
    </lm-input>
  </div>
</template>

<script>
export default {
  name: "LmInputNumber",
  props: {
    value: {
      //绑定值
      type: [Number, String],
      default: 0,
    },
    step: {
      // 计数器步长
      type: Number,
      default: 1,
    },
    max: {
      // 最大值
      type: Number,
      default: 10,
    },
    min: {
      // 最小值
      type: Number,
      default: 0,
    },
    disabled: {
      // 是否可点击
      type: Boolean,
      default: false,
    },
    precision: {
      // 精度
      type: Number,
      default: 0,
    },
  },
  computed: {
    //   计算计步器的显示值
    inputVal: {
      get() {
        return this.value;
      },
      set(newVal) {
        let { max, min } = this;
        let limit = [
          {
            validate: (val) => !this.isNumber(val),
            res: this.inputVal,
          },
          {
            validate: (val) => val >= max,
            res: max,
          },
          {
            validate: (val) => val <= min,
            res: min,
          },
          {
            validate: (val) => true,
            res: newVal * 1,
          },
        ];
        let _val = limit.find((v) => v.validate(newVal)).res;
        this.$emit("input", _val.toFixed(this.precision));
      },
    },
    // 加的disabled
    increaseDisabled() {
      return this.disabled || this.inputVal >= this.max;
    },
    // 减的disabledd
    decreaseDisabled() {
      return this.disabled || this.inputVal <= this.min;
    },
  },
  methods: {
    //   input的change事件
    handleChange() {
      this.inputVal = this.value;
      this.$forceUpdate();
    },
    //   判断是不是Number类型
    isNumber(num) {
      return (
        !isNaN(num * 1) &&
        Object.prototype.toString.call(num * 1) === `[object Number]`
      );
    },
    // 处理计步器的点击事件
    handleClick(str) {
      switch (str) {
        case "increase":
          if (this.increaseDisabled) return;
          this.inputVal = Number(this.inputVal) + this.step;
          break;
        case "decrease":
          if (this.decreaseDisabled) return;
          this.inputVal = Number(this.inputVal) - this.step;

          break;
        default:
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.is-disabled {
  cursor: not-allowed !important;
}

.cursor-pointer {
  cursor: pointer;
  width: 40px;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>